<template>
	<view>
		<u-gap height="40rpx"></u-gap>
		<view class="maxTitle">基本信息</view>

		<u-gap height="20rpx"></u-gap>
		<view class="form">
			<u-gap height="0rpx"></u-gap>
			<view class="form-item">
				<view class="form-item-title">姓名</view>
				<up-input
					v-model="form.name"
					placeholder="请输入姓名"
					border="bottom"
					clearable></up-input>
			</view>
			<view class="form-item">
				<view class="form-item-title">手机号</view>
				<up-input
					v-model="form.phone"
					placeholder="请输入手机号"
					border="bottom"
					clearable></up-input>
			</view>
			<view class="form-item">
				<view class="form-item-title">公司名称</view>
				<up-input
					v-model="form.company"
					placeholder="请输入公司名称"
					border="bottom"
					clearable></up-input>
			</view>
			<view class="form-item">
				<view class="form-item-title">邮箱</view>
				<up-input
					v-model="form.email"
					placeholder="请输入邮箱"
					border="bottom"
					clearable></up-input>
			</view>
			<view class="form-item" v-if="parentType !== 4">
				<view class="form-item-title">产品名称</view>
				<view @click="handleProduct">
					<up-input
						v-model="form.proname"
						placeholder="请选择产品名称"
						border="bottom"
						clearable
						readonly
						suffixIcon="arrow-down"></up-input>
				</view>
			</view>
			<u-gap height="20rpx"></u-gap>
		</view>

		<u-gap height="30rpx"></u-gap>
		<view class="maxTitle">描述需求</view>
		<u-gap height="20rpx"></u-gap>
		<view class="remark">
			<u--textarea
				v-model="form.description"
				placeholder="请输入您的需求"
				count
				:maxlength="300"></u--textarea>
		</view>

		<u-gap height="60rpx"></u-gap>
		<view class="btnConfirm" @click="confirm">立即提交</view>
		<u-gap height="40rpx"></u-gap>

		<u-modal
			:show="modalShow"
			:showCancelButton="false"
			width="600rpx"
			title="提交成功"
			:content="modalContent"
			cancelColor="#707070"
			confirmColor="#D93954"
			cancelText="取消"
			confirmText="我知道了"
			@confirm="confirmModal"
			@cancel="modalShow = false"></u-modal>

		<u-popup :show="productShow" @close="confirmProduct">
			<view class="product relative">
				<image
					@click="confirmProduct"
					class="product-close absolute"
					src="https://aph.junhecms.com/image/homePage/19.png" />
				<view class="product-head">选择产品</view>
				<scroll-view :scroll-y="true" class="product-main">
					<view
						v-for="item in productList"
						:key="item.id"
						class="product-item flex space-between align-items_center"
						@click="form.proid = item.id">
						<view>{{ item.title }}</view>
						<image
							v-show="form.proid === item.id"
							src="https://aph.junhecms.com/image/homePage/20.png" />
					</view>
					<view
						class="product-item flex space-between align-items_center"
						@click="form.proid = 0">
						<view>其他</view>
						<image
							v-show="form.proid === 0"
							src="https://aph.junhecms.com/image/homePage/20.png" />
					</view>
				</scroll-view>
				<u-gap height="55rpx"></u-gap>
				<view class="btnConfirm" @click="confirmProduct">确定</view>
				<u-gap height="30rpx"></u-gap>
			</view>
		</u-popup>

		<share />
		<tabbar />
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { post } from '@/utils/collect.js';
import { msg } from '@/utils/tool.js';

// 产品列表
const activeProdcut = ref();
const productList = ref([]);
const _product = () => {
	post('/index/product', { page: 1, limit: 1000 }).then((res) => {
		productList.value = res.data.data;
	});
};
_product();

const confirmProduct = () => {
	if (form.proid === 0) {
		form.proname = '其他';
	} else {
		form.proname = productList.value.find((item) => item.id === form.proid)?.title;
	}
	productShow.value = false;
};

const form = reactive({
	name: undefined,
	phone: undefined,
	company: undefined,
	email: undefined,
	proname: undefined,
	description: undefined,
	proid: undefined
});

const modalContent = ref('工作人员看到后，会电话联系您，请留意电话');

const parentType = ref(1);
const booksId = ref();
onLoad((options) => {
	if (options.titleType) {
		parentType.value = parseInt(options.titleType);

		let title = '';
		const type = parseInt(options.titleType);

		if (type === 4) {
			booksId.value = options.id;
			modalContent.value = '感谢您的关注，白皮书已成功发送您的邮箱，请查收！';
			title = '一键下载信息填写';
		} else if (type === 0) title = '免费试用';
		else if (type === 1) title = '申请演示';
		else if (type === 2) title = '填写公司信息';
		uni.setNavigationBarTitle({
			title
		});

		uni.setStorageSync('navTitle', title);
	}
});

// 选择产品
const productShow = ref(false);
const productClose = () => (productShow.value = false);
const handleProduct = () => {
	productShow.value = true;
};

// 弹窗
const modalShow = ref(false);
const confirm = () => {
	if (!form.name) return msg('姓名不能为空');
	if (!form.phone) return msg('手机号不能为空');
	if (!form.company) return msg('公司名称不能为空');
	if (!form.email) return msg('邮箱不能为空');
	if (!form.proid && parentType.value !== 4) return msg('产品不能为空');

	if (parentType.value !== 4) {
		const data = {
			flag: parentType.value,
			...form
		};
		// 信息提交
		post('/index/prodown', data).then((res) => {
			if (parentType.value === 2) uni.setStorageSync('corporation', 1);
			modalShow.value = true;
		});
	} else {
		// 下载白皮书
		post('/index/books_down', {
			...form,
			proid: undefined,
			proname: undefined,
			id: booksId.value
		}).then((res) => {
			uni.setStorageSync('downBooks', 1);
			modalShow.value = true;
		});
	}
};
const confirmModal = () => {
	modalShow.value = false;
	uni.navigateBack();
};
</script>

<style>
page {
	background: #f5f5f5;
}
</style>
<style scoped lang="scss">
.product {
	min-height: 675rpx;
	&-close {
		width: 40rpx;
		height: 40rpx;
		right: 30rpx;
		top: 44rpx;
	}
	&-main {
		height: 500rpx;
	}
	&-item {
		padding: 0rpx 30rpx;
		height: 44rpx;
		line-height: 44rpx;
		margin: 30rpx 0rpx;
		view {
			font-weight: 400;
			font-size: 30rpx;
			color: #000000;
		}
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	&-head {
		margin-top: 44rpx;
		font-weight: 500;
		font-size: 36rpx;
		color: #2d2d2d;
		text-align: center;
	}
}
.remark {
	background: #fff;
	padding: 0 10rpx 10rpx;
	:deep(.u-border) {
		border-color: transparent !important;
	}
}
.form {
	background: #fff;
	&-item {
		padding: 0 30rpx;
		:deep(.u-input) {
			padding-left: 0rpx !important;
		}
		&-title {
			margin-top: 40rpx;

			font-weight: 500;
			font-size: 30rpx;
			color: #2d2d2d;
		}
	}
}
.maxTitle {
	font-weight: bold;
	font-size: 36rpx;
	color: #7d7d7d;
	margin: 0rpx 30rpx;
}
</style>
